import addressEditText from './template/address-edit.js'
import RenderTemplate from '@/util/hogan/index.js'
import cities from './template/cities.js'
import {trimStr,getData} from '@/util/dom/index.js'
import addressService from '@/service/address-service'
let addressHandler = {
	data : {
		update : false,
		onChange : null,
		element : document.getElementsByClassName('modal-wrap')[0],
		simulateData 　:{

		}
	},
	hide : function(){
		this.data.element.innerHTML = ''
	},
	show : function(param){
		let userOption = Object.assign(this.data,param)
		new RenderTemplate(addressEditText,{
			isUpdate:this.data.update,
			data : {}
		}).render().then((res) => {
			this.data.element.innerHTML = res
			this.loadProvinces()
			this.bindEvent()
		})
		
	},
	bindEvent : function(){
		let ele =document.getElementById("receiver-province")
		ele.addEventListener("change",()=>{
			let value = ele.value
			let subElement = document.getElementById("receiver-city")
			let city = cities.getCities(value)
			let html = "<option>请选择</option>"
			for(let i=0;i<city.length;i++){
				let temp = '<option>'+city[i]+'</option>'
				html = html+temp
			}
			subElement.innerHTML = html
		})

		this.data.element.getElementsByClassName('modal-container')[0]
			.addEventListener('click',(e) =>{
				e.stopPropagation()
			})

		let eleArray =this.data.element.getElementsByClassName('close')
		let array = [...eleArray]
		array.forEach((ele) =>{
			ele.addEventListener('click',() => {
			this.hide()
			})
		})

		document.getElementsByClassName('address-btn')[0].addEventListener('click',() => {
			let addressInfo = this.getReceiverInfo();
			if(!this.data.update){
				addressService.addAddress({addressInfo},(res) =>{
					console.log(res);
				},()=>{
					console.log('add address error');
				})
			}else{
				addressService.updateAddress(addressInfo,(res) =>{
					console.log(res)
				},(errMsg) => {
					console.log(errMsg)
				})
			}
			
		})
		

		 
	},
	loadProvinces : function(){
		let html = '<option>请选择</option>'
		let provinces = cities.getProvinces()
		for(let i=0;i<provinces.length;i++){
			let temp = '<option>'+provinces[i]+"</option>"
			html = html+temp;
		}
		document.getElementById("receiver-province").innerHTML = html
	},
	getReceiverInfo : function(){
		let id = document.getElementById('receiver-id').getAttribute("value");
		let receiverName = document.getElementById('receiver-name').value;
		let receiverProvince       = document.getElementById('receiver-province').value;
		let receiverCity       = document.getElementById('receiver-city').value;
		let receiverAddress       = document.getElementById('receiver-address').value;
		let receiverPhone       = document.getElementById('receiver-phone').value;
		let receiverZip       = document.getElementById('receiver-zip').value;
      	
      	let info = {
      		receiverName,
      		receiverProvince,
      		receiverCity,
      		receiverAddress,
      		receiverPhone,
      		receiverZip
      	}
      	if(this.data.update){
      		info['id'] = id
      	}
      	return info
	}
}
export default addressHandler;